<template>
  <div class='swiper-wrap'>
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for='(list,index) in swiperlist' :key='index'>
        <img :src="list.imgUrl" alt="">
      </swiper-slide>
     
     
      <!-- 分页器 -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  export default {
    name: 'HomeSwiper',
    props:['swiperlist'],
    data() {
      return {
        swiperOptions:{
        	pagination:{
            el: '.swiper-pagination',
            clickable:true
          },
          loop:true,
          autoplay:{
            stopOnlastSlide:true,
            autoplay:1000
          }
        }
      }
    }
  }
</script>


<style scoped="scoped">
  .swiper-wrap{
    width:100%;
    height: 0;
    padding-bottom:25%;
    overflow: hidden;
    background-color: #ccc;
  }
  img{
      width:100%;
      height:100%;
  }
</style>
